<script setup>

const props = defineProps(["columns", "height", "loadData", "rowClick", "rowDbClick"])

const data = ref([])

const pageInfo = ref({
	total: 0,
	pageSize: 10,
	currentPage: 1
})
const refresh = async () => {
	const c = await props.loadData({
		size: pageInfo.pageSize,
		current: pageInfo.currentPage
	});
	data.value = c.records;
	pageInfo.value.total = c.total;
	pageInfo.value.pageSize = c.size;
	pageInfo.value.currentPage = c.current;
}

defineExpose({
	refresh
})

const rowClick = (d) => {
	if (props.rowClick) {
		props.rowClick(d);
	}
}
const rowDbClick = (d, i) => {
	if (props.rowDbClick) {
		props.rowDbClick(d);
	}
}
onMounted(() => {
	refresh();
})

</script>

<template>
	<Row justify="start">
		<Col :span="24">
			<Table :height="props.height" @on-row-dblclick="rowDbClick" stripe highlight-row @on-row-click="rowClick"
				   border :columns="props.columns" :data="data">
			</Table>
		</Col>

	</Row>
	<Row justify="start">
		<Col :span="24">
			<Page @on-change="refresh" v-model="pageInfo.currentPage" show-total show-elevator prev-text="上一页"
				  next-text="下一页" :total="pageInfo.total" :page-size="pageInfo.pageSize" show-sizer/>
		</Col>

	</Row>
</template>

<style scoped>

</style>
